<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购买商品</title>
</head>
<style>
    #footer {
        margin-left: 50%;
        margin-bottom: 40px;
        position: absolute;

        bottom: 0;
    }

    .goods {
        outline: #00FF00 dotted thick;
        border-radius: 2em;
    }
    input[type='number'] {
        -moz-appearance: textfield !important;
    }

</style>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>

<body>
<div id="app">
    <div>
        <template>
            <div>
                <div style="margin-top: 30px;">

                    <el-button type="danger" style="margin-left: 1000px" @click="changeStatus(1)"
                               :disabled="btnUnChecked">未付款 </el-button>
                    <el-button type="primary" style="margin-left: 5px" @click="changeStatus(2)"
                               :disabled="btnPassed">已付款 </el-button>
                    <el-button type="success" style="margin-left: 5px" @click="changeStatus(3)"
                               :disabled="btnUnBuyed">已收货 </el-button>


                </div>
            </div>
        </template>
    </div>

    <!-- 未付款 -->
    <el-table :data="tableData" border stripe style="margin-top:30px;width: 1105px;margin-left: 100px;" v-if="pay">
        <el-table-column align="center" prop="goodsName" label="商品名称" width="288" :show-overflow-tooltip='true'>
        </el-table-column>

        <el-table-column align="center" prop="typeName" label="类别" width="80"></el-table-column>
        <el-table-column align="center" prop="transactionAmount" label="成交价" width="120"></el-table-column>
        <el-table-column align="center" prop="createTime" label="成交时间（请在72小时之内支付尾款）" width="300">

        </el-table-column>
        </el-table-column>

        <el-table-column label="操作" width="316" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="viewDetails(scope.row)" size="small">查看详情 </el-button>
                <el-button type="success" @click="buy(scope.row)" size="small" >支 付 </el-button>

            </template>
        </el-table-column>
    </el-table>

    <!-- 已付款 -->
    <el-table :data="tableData" border stripe style="margin-top:30px;width: 1105px;margin-left: 100px;" v-if="check">
        <el-table-column align="center" prop="goodsName" label="商品名称" width="288" :show-overflow-tooltip='true'>
        </el-table-column>

        <el-table-column align="center" prop="typeName" label="类别" width="80"></el-table-column>
        <el-table-column align="center" prop="transactionAmount" label="成交价" width="120"></el-table-column>
        <el-table-column align="center" prop="createTime" label="成交时间" width="300">

        </el-table-column>
        </el-table-column>

        <el-table-column label="操作" width="316" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="viewDetails(scope.row)" size="small">查看详情 </el-button>
                <el-button type="success" @click="receive(scope.row)" size="small"  v-if="check">确认收货</el-button>
                <el-button type="info" @click="checkLogistic(scope.row)" size="small" v-if="check">查看物流</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 已收货 -->
    <el-table :data="tableData" border stripe style="margin-top:30px;width: 1105px;margin-left: 100px;" v-if="complect">
        <el-table-column align="center" prop="goodsName" label="商品名称" width="288" :show-overflow-tooltip='true'>
        </el-table-column>

        <el-table-column align="center" prop="typeName" label="类别" width="80"></el-table-column>
        <el-table-column align="center" prop="transactionAmount" label="成交价" width="120"></el-table-column>
        <el-table-column align="center" prop="createTime" label="成交时间" width="300">

        </el-table-column>
        </el-table-column>

        <el-table-column label="操作" width="316" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="viewDetails(scope.row)" size="small">查看详情 </el-button>
                <el-button type="success" @click="goComment(scope.row)" size="small" v-if="complect">去评价</el-button>

            </template>
        </el-table-column>
    </el-table>

    <div class="block" id="footer">
        <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                       :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
    </div>

    <!-- 付款 -->
    <el-dialog title="请选择收货地址" :visible.sync="buyFrom">
        <div >
            <template>
                <el-select v-model="value" placeholder="请选择" style="width: 600px;">
                    <el-option
                            v-for="item in location"
                            :key="item.addressId"
                            :label="item.all"
                            :value="item.addressId ">
                    </el-option>
                </el-select>
            </template>


        </div>

        <div style="margin-top: 50px;margin-left: 200px;">
            <el-button type="primary" @click="doBuy()" >支 付</el-button>
            <el-button style="margin-left: 100px; " @click="buyFrom = false">取消</el-button>
        </div>
        </el-form>
    </el-dialog>

    <!-- 查看物流信息 -->
    <el-dialog title="物流信息" :visible.sync="logisticsVisible">
        <el-descriptions title="15天后未收货将自动确认收货" column="2">
            <el-descriptions-item label="快递公司">{{logistics.logisticsName}}</el-descriptions-item>
            <el-descriptions-item label="物流单号">{{logistics.logisticsId}}</el-descriptions-item>

            <el-descriptions-item label="发货时间">{{logistics.deliveryTime}}</el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 50px;margin-left: 250px;">
            <el-button type="primary" @click="logisticsVisible = false" >确定</el-button>

        </div>
        </el-form>
    </el-dialog>

    <!-- 评价 -->
    <el-dialog title="评价" :visible.sync="rateVisible">
        <el-form :model="evaluationForm"  ref="evaluationForm" :rules="rules">
            <el-form-item label="评分" prop="rate">
                <el-rate  style="margin-top: 10px;"
                          v-model="evaluationForm.rate"
                          show-text>
                </el-rate>
            </el-form-item>
            <el-form-item label="评论" prop="detail" >
                <el-input v-model="evaluationForm.detail"   type="textarea" maxlength="100"
                          show-word-limit ></el-input>
            </el-form-item>
            <el-form-item label="图片上传" prop="fileList" >
                <el-upload
                        class="upload-demo"
                        action="/common/upload"
                        :on-preview="handlePreview"
                        :before-upload="handleBeforeUpload"
                        :on-remove="handleRemove"
                        :limit="6"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                        :on-success="handleSuccess"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，并且不能大于2M</div>
                </el-upload>
            </el-form-item>
        </el-form>

        <div style="margin-top: 50px;margin-left: 150px;">
            <div style="margin-top: 50px;">
                <el-button type="primary" @click="comment()" >确 认</el-button>
                <el-button style="margin-left: 100px; " @click="rateVisible = false">取 消</el-button>
            </div>

        </div>
        </el-form>
    </el-dialog>



</div>






</body>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                rules: {
                    detail: [
                        { required: true, message: '请输入评价信息', trigger: 'blur' }
                    ],
                    // rate: [
                    //     { required: true, message: '请打分',trigger: 'blur' }
                    // ],


                },
                pay: false,
                check: false,
                complect: false,
                logisticsVisible: false,
                rateVisible: false,
                value: "",
                evaluationForm:{
                    rate: "",
                    images: [],
                    goodsId: "",
                    buyerUserId: ""
                },
                location:[

                    {   orderId:"1",
                        person: "王渝",
                        phone: "15213324310",
                        detailedAddress:"aaaaaaaaaaaaaaaaa",
                        all:"王渝 15213324310 aaaaaaaaaaaaaaaaa"
                    },

                ],

                logistics:{
                    "logisticsId": "000000000000",
                    "orderId": "1609114574009798657",
                    "currentLocation": null,
                    "deliveryTime": "2023-01-05 16:52:31",
                    "receivingTime": null,
                    "status": "2",
                    "createTime": "2023-01-05 16:52:31",
                    "logisticsName": "天天快递",
                    "updateTime": "2023-01-05 16:52:31"
                },
                value1: [],
                dialogFormVisible: false,
                buyFrom: false,
                formLabelWidth: '120px',
                btnUnChecked: false,
                btnPassed: false,
                btnUnPassed: false,
                btnUnBuyed: false,
                type: "",
                tableData: [{
                    "goodsId": "1",
                    "userId": null,
                    "goodsName": "劳力士",
                    "deposit": "50",
                    "description": null,
                    "imageId": null,
                    "startingPrice": 500,
                    "startingTime": "2022/12/01 15:00",
                    "endTime": "2022/12/02 15:00",
                    "priceMarkup": 0,
                    "images": null,
                    "typeName": "表",
                    "status": "1",
                    "userName": "LostSouls",
                    "realName": null,
                    "phone": "15213324310",
                    "email": "2568938256@qq.com",
                    "breakCount": 0,
                    "orderId": "1"
                }],

                pagination: { //分页相关模型数据
                    currentPage: 1, //当前页码
                    pageSize: 8, //每页显示的记录数
                    total: 0, //总记录数
                },
                publishForm:{},
                status: "1",
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                pickerOptions: {
                    disabledDate(time) {
                        const date = new Date();
                        return time.getTime() < date.getTime();

                    },
                },
                fileList: [

                ],
                currentOrder: {

                },

            };



        },

        created() {
            this.getAll();
            this.getAllAddress()

        },



        methods: {
            handleSuccess(res,file,fileList) {
                fileList[fileList.length - 1].name = res.data;
                console.log(fileList);
                this.fileList = fileList;
                // if(this.fileList == null){
                //
                // }
                // this.fileList[this.fileList.length].name = res.data.data;
                // console.log(this.fileList)
                // if(this.publishForm.images == null){
                //     this.publishForm.images = []
                // }
                // this.publishForm.images[this.publishForm.images.length] = res.data;
            },
            handleExceed(files, fileList){
                this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handleRemove(file, fileList) {
                this.fileList = fileList;
            },
            handlePreview(file) {
                console.log(file);
            },
            handleBeforeUpload(file) {
                const uploadLimit = 2
                const uploadTypes = ['jpg', 'png']
                const filetype = file.name.replace(/.+\./, '')
                const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
                if (!isRightSize) {
                    this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
                    return false
                }

                if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
                    this.$message.warning({
                        message: '请上传jpg、png格式的图片'
                    })
                    return false
                }

                return true
            },
            getAllAddress() {
                axios.get("/address/getAll/" + sessionStorage.getItem("userId")).then((res) => {
                    this.location = res.data.data
                })
            },

            getAll() {
                this.btnUnChecked = false;
                this.btnUnPassed = false;
                this.btnPassed = false;
                this.btnUnBuyed = false;
                this.check = false;
                this.complect = false;
                this.pay = false;
                if (this.status == "1")
                {
                    console.log("1...")
                    this.btnUnChecked = true;
                    this.pay = true;

                }
                if (this.status == "2") {
                    console.log("2...")
                    this.btnPassed = true;
                    this.check = true;
                }
                if (this.status == "3") {
                    console.log("3...")
                    this.btnUnBuyed = true;
                    this.complect = true;
                }

                axios.get("/order/getAll/" + this.pagination.currentPage + "/" + this.pagination.pageSize +
                    "/" + this.status + "/" + sessionStorage.getItem("userId")).then((res) => {
                    this.tableData = res.data.data.list;
                    this.pagination.pagesize = res.data.data.pageSize;
                    this.pagination.currentPage = res.data.data.pageNum;
                    this.pagination.total = res.data.data.total;
                })

            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getAll();
            },
            viewDetails(row) {
                sessionStorage.setItem("currentGoodsId",row.goodsId);
                window.parent.location.href = "./goodsDetail.html"
                // this.form = row;

                // this.dialogFormVisible= true;
                // this.$alert("点击" + this.dialogFormVisible)
            },
            changeStatus(status) {
                this.status = status;
                this.pagination.currentPage = 1;
                this.getAll();
            },
            buy(row){
                this.buyFrom = true;
                this.currentOrder = row
            },
            doBuy(){

                if(this.value == ""){
                    this.$message.info("请先选择地址")
                }else{
                    this.currentOrder.buyerAddressId = this.value;
                    this.$confirm("确认支付吗？","提示",{type:"info"}).then(()=>{
                        axios.post("/order/pay",this.currentOrder).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else {
                                this.$message.success(res.data.data)
                            }
                            this.getAll()
                            this.depositRule = false;
                            this.buyFrom = false;
                        })
                    }).catch(()=>{
                        //this.$message.info("取消");
                    })

                }

            },
            checkLogistic(row){
                axios.get("/logistics/check/" + row.orderId).then((res) => {
                    if(res.data.code == 0){
                        this.$message.info("商家未发货")
                    }else {
                        this.logistics = res.data.data;
                        this.logisticsVisible = true;
                    }
                })
            },
            receive(row){
                this.$confirm("确认收货吗？","提示",{type:"info"}).then(()=>{
                    axios.post("/logistics/receive/"+ row.orderId).then((res) => {
                        if(res.data.code == 0){
                            this.$message.error(res.data.msg)
                        }else {
                            this.$message.success(res.data.data)
                        }
                        this.getAll();
                    })
                }).catch(()=>{
                    //this.$message.info("取消");
                })
            },
            comment(){
                this.$refs.evaluationForm.validate(async (valid) => {
                    if(valid){
                        if(this.evaluationForm.rate == ""){
                            this.$message.error("请打分");
                        }else{
                            this.evaluationForm.images = [];
                            for(var i = 0 ;i < this.fileList.length;i++){
                                this.evaluationForm.images[i] = this.fileList[i].name;
                            }
                            console.log(this.evaluationForm)
                            axios.post("/evaluation/comment",this.evaluationForm).then((res) => {
                                if(res.data.code == 0){
                                    this.$message.error(res.data.msg)
                                }else {
                                    this.$message(res.data.data)
                                    this.evaluationForm={
                                        rate: "",
                                        images: [],
                                        goodsId: "",
                                        buyerUserId: ""
                                    }
                                    this.rateVisible = false;
                                }
                            })

                        }

                    }
                })
            },
            goComment(row){
              this.evaluationForm.buyerUserId = row.buyerUserId;
              this.evaluationForm.goodsId = row.goodsId;
              this.rateVisible = true;
            },
        }

    })
</script>

</html>